<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>QBasic快速开发框架 | 登录</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/common.css"/>
    <link rel="stylesheet" href="/css/login.css" />
</head>

<body class="hold-transition login-page">
    <div class="login-box">
        <div class="login-logo">
            <a href="/login"><b>QBasic快速开发框架</b></a>
        </div>
        <div id="loginContainer" class="login-box-body">
            <p class="login-box-msg">登&nbsp;&nbsp;&nbsp;&nbsp;录</p>

            <form action="/login" method="post" v-on:submit="login($event)">
                <div class="form-group has-feedback">
                    <input type="text" id="username" name="username" v-model="username" class="form-control" placeholder="用户名">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" id="password" name="password" v-model="password" class="form-control" placeholder="密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback captcha-group">
                    <div class="col-xs-7">
                        <input type="text" id="captcha" name="captcha" v-model="captcha" class="form-control" placeholder="验证码">
                    </div>
                    <div class="col-xs-5">
                        <img alt="验证码" class="captcha-img" v-bind:src="captchaUrl" v-on:click="refreshCaptcha">
                    </div>
                </div>
                <div class="row submit-group">
                    <div class="col-xs-8">
                        <label class="text-red text-center">
                        <span id="errMsg" th:text="${error}" v-text="error"/>
                    </label>
                    </div>
                    <div class="col-xs-4">
                        <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugins/vue/vue.min.js"></script>
    <script src="/js/login.js"></script>
</body>

</html>